@import "../../assets/css/tailwind.css";
html,
body {
  @apply w-screen h-screen;
}

.div-content {
  @apply w-full h-full flex;
  .div-left.contract {
    flex-basis: 50px;
    .div-left-top {
      .div-home-title {
        .title {
          display: none;
        }
        .icon-contract{
          display: none;
        }
        .icon-expand{
          cursor: pointer;
          display: block;
          width: 50px;
          @apply py-1;
          &:hover{
            filter: brightness(1.5);
          }
        }
      }
      .div-appliction-title {
        @apply justify-center;
        .span-application-title {
          display: none;
        }
      }
    }
  }
  .div-left {
    transition: flex-basis 0.3s;
    background: url("/assets/home/images/menu.png");
    @apply basis-1/6 grow-0 flex flex-col bg-cover drop-shadow;
    flex-basis: 15%;
    background: #0a192f;
    .div-left-top {
      border-color: rgba(0, 243, 255, 0.3);
      @apply basis-1/3 w-full border-b;
      .div-home-title {
        @apply flex w-full items-center px-2;
        .title {
          @apply w-full;
        }
        .icon-contract {
          float: right;
          cursor: pointer;
          display: block;
          /* @apply p-1; */
          &:hover {
            background: #d0d7dd3d;
          }
        }
        .icon-expand{
          display: none;
        }
        color: #00f3ff;
        @apply text-xs sm:text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg;
        @apply tracking-wider font-bold text-center py-1;
      }
      .div-appliction-title {
        border-color: rgba(0, 243, 255, 0.3);
        color: #fff;
        @apply text-xs sm:text-xs md:text-xs lg:text-xs xl:text-sm 2xl:text-sm;
        @apply flex items-center justify-between w-full tracking-wider font-light border-b p-1;
        span {
          @apply flex items-center px-2;
          /* @apply basis-1/2 px-2; */;
        }
        .span-application-title {
          /* @apply text-start; */
        }
        .span-application-more {
          /* @apply text-end; */
          &:hover {
            cursor: pointer;
            @apply font-bold;
            background: #d0d7dd3d;
          }
        }
      }
    }
    .div-left-bottom {
      @apply grow w-full border-b;
    }
  }
  .div-right {
    @apply grow flex flex-col;
    .div-right-top {
      @apply w-full basis-1/12 flex flex-col bg-gray-50;
      .box-top {
        @apply basis-1/2;
      }
      .box-bottom {
        @apply basis-1/2 border-t border-b;
      }
    }
    .div-right-bottom {
      @apply w-full grow flex;
    }
  }
}
